<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="病人姓名">
              <a-input v-model="queryParam.ecgUsername" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="left" @click="backward()">返回</a-button>
      <a-button type="primary" icon="plus" @click="$refs.AddSession.add()">新建</a-button>
      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }}提示</a-button>
      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="remove">
            <remove-session ref="RemoveSession" :sessionIds="selectedRowKeys.join(',')" @ok="handleOk"/>
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      showPagination="auto"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="getInfo(record)">详情</a>
        </template>
      </span>
    </s-table>
    <query-info ref="QueryInfo" @ok="handleOk" ></query-info>
    <add-session ref="AddSession" @ok="handleOk"/>
    <edit-session ref="EditSession" @ok="handleOk"/>
  </a-card>
</template>

<script>
  // import moment from 'moment'
  import { STable } from '@/components'
  import { querySession } from '@/api/medical/session'
  import AddSession from './modules/session/AddSession'
  import EditSession from './modules/session/EditSession'
  import RemoveSession from './modules/session/RemoveSession'
  import QueryInfo from '@/views/medical/modules/info/QueryInfo'
  // 用于处理过滤器动态获取数据
  let that // eslint-disable-line no-unused-vars

  export default {
    name: 'SessionList',
    components: {
      STable,
      AddSession,
      EditSession,
      RemoveSession,
      QueryInfo
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'orderNumber',
            align: 'center'
          },
          {
            title: '开始日期',
            dataIndex: 'idDate',
            align: 'center',
            sorter: true
          },
          {
            title: '开始时间',
            dataIndex: 'idTime',
            align: 'center',
            sorter: true
          },
          {
            title: '病人姓名',
            dataIndex: 'ecgUsername',
            align: 'center'
          },
          {
            title: '连接设备ip',
            dataIndex: 'loginIp',
            align: 'center'
          },
          {
            title: '结束原因',
            dataIndex: 'descriptionCn',
            align: 'center'
          },
          {
            title: '结束日期',
            dataIndex: 'idEndDate',
            align: 'center',
            sorter: true
          },
          {
            title: '结束时间',
            dataIndex: 'idEndTime',
            align: 'center',
            sorter: true
          },
          {
            title: 'ecg',
            ataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接收
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return querySession(Object.assign(parameter, queryJson))
            .then(res => {
              return res.data.result
            })
        },
        selectedRowKeys: [],
        selectedRows: [],
        options: {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        optionAlertShow: true
      }
    },
    filters: {

    },
    created () {
      this.tableOption()
      this.getSession()
    },
    methods: {
      tableOption () {
        if (!this.optionAlertShow) {
          this.options = {
            alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
            rowSelection: {
              selectedRowKeys: this.selectedRowKeys,
              onChange: this.onSelectChange
            }
          }
          this.optionAlertShow = true
        } else {
          this.options = {
            alert: false,
            rowSelection: null
          }
          this.optionAlertShow = false
        }
      },
      backward () {
        this.$router.replace({ name: 'medicalInfo' })
      },
      handleEdit (record) {
        this.$refs.EditSession.edit(record)
      },
      getInfo (record) {
        this.$refs.QueryInfo.getHistoryInfo(record)
      },
      getSession () {
        this.queryParam.idDevice = this.$route.params.sensorId
      },
      handleOk () {
        this.$refs.table.clearSelected()
        this.$refs.table.refresh(false)
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    }
  }
</script>
